<template>
  <view>
    <!-- 作业票审查 -->
    <view class="top-header"> 分析数据结果 </view>

    <view class="cu-padding-bottom-38 bg-white">
      <view class="container">
        <view class="line"></view>
        <view class="cu-padding-top-40 cu-padding-left-20 cu-padding-right-20 cu-relative">
          <view class="add-wrap flex">
            <view class="flex-auto flex align-center">
              <image class="icon" src="@/static/images/tip_icon.png" mode="aspectFit"></image>
              <view class="no-data-text">没有数据，请添加分析数据</view>
            </view>
            <view class="button" @click="addButtonClickHandler">立即添加</view>
          </view>
        </view>

        <view class="card-wrap" v-for="item in 4" :key="item">
          <view class="number">{{ item }}</view>
          <view class="content">
            <view class="header-wrap">
              <view class="title">分析对象名称</view>
              <view class="time">
                <uni-dateformat date="2022/11/05 10:31" format="yyyy/MM/dd hh:mm"></uni-dateformat>
              </view>
            </view>
            <view class="cu-card-wrap">
              <view class="body-wrap">
                <view class="content-wrap">
                  <view class="label">分析点：</view>
                  <view class="value">锅炉前烟箱锅炉前烟箱锅炉前烟箱</view>
                </view>
                <view class="content-wrap">
                  <view class="label">阈值：</view>
                  <view class="value">小于0.5%</view>
                </view>
                <view class="content-wrap">
                  <view class="label">分析数据：</view>
                  <view class="value">0.2%</view>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>

    <view class="bg-white">
      <uni-forms ref="form" :modelValue="formData" labelWidth="120px" labelPosition="top">
        <view class="hidden-title">审查结果</view>
        <view class="background-white cu-padding-left-30 cu-padding-right-30 cu-padding-top-10">
          <uni-forms-item class="bor-btm" name="value1" required label="审查意见" labelWidth="120">
            <CuRadioGroup :list="fireWayList" />
          </uni-forms-item>
          <uni-forms-item name="value1" label="审查意见说明" required labelWidth="120">
            <textarea v-model="formData.location" class="text-area" placeholder="简要说明审批意见" maxlength="50" />
          </uni-forms-item>
        </view>
      </uni-forms>
      <view class="cu-padding-bottom-40">
        <view class="button-confirm">确定</view>
      </view>
    </view>

    <uni-popup ref="popup" type="center">
      <view class="popup-wrap">
        <uni-forms ref="form" :rules="rules" :modelValue="detailInfo" labelWidth="120px" labelPosition="top">
          <uni-forms-item required name="managerDesc" label="分析点" labelWidth="120">
            <textarea v-model="detailInfo.location" class="text-area" placeholder="不大于20字" maxlength="20" />
          </uni-forms-item>
          <uni-forms-item required name="managerDesc" label="分析对象" labelWidth="120">
            <input type="text" class="text-input" placeholder="例：H2" maxlength="20" />
          </uni-forms-item>
          <uni-forms-item required name="managerDesc" label="阈值" labelWidth="120">
            <input type="text" class="text-input" placeholder="例：小于0.5%" maxlength="20" />
          </uni-forms-item>
          <uni-forms-item required name="managerDesc" label="分析数据" labelWidth="120">
            <input type="text" class="text-input" placeholder="不大于20字" maxlength="20" />
          </uni-forms-item>
        </uni-forms>

        <view class="button-wrap">
          <view class="button button-confirm">确定</view>
          <view class="button button-cancle">取消</view>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
import CuRadioGroup from '@/components/cu-radio-group/cu-radio-group.vue'
export default {
  components: {
    CuRadioGroup
  },
  data() {
    return {
      detailInfo: {
        location: undefined
      },
      formData: {
        value1: ''
      },
      rules: {
        value1: {
          rules: [
            {
              required: true,
              errorMessage: '不能为空'
            }
          ]
        }
      },
      activeLevel: [],
      fireWayList: ['通过', '不予通过', '指定回退', '转发']
    }
  },
  onReady() {
    this.$refs.form.setRules(this.rules)
  },
  methods: {
    addButtonClickHandler() {
      this.$refs.popup.open()
    }
  }
}
</script>

<style lang="scss" scoped>
.top-header {
  font-size: 26rpx;
  color: #999999;
  line-height: 80rpx;
  padding-left: 30rpx;
}

.container {
  position: relative;

  .line {
    position: absolute;
    left: 55rpx;
    height: 100%;
    display: inline-block;
    width: 1rpx;
    background-color: #d5d7e3;
  }

  .add-wrap {
    background-color: #fff;
    background: #f8f8f8;
    border-radius: 39rpx;
    padding: 10rpx 20rpx;

    .icon {
      width: 32rpx;
      height: 32rpx;
      margin-right: 28rpx;
    }

    .no-data-text {
      line-height: 58rpx;
      font-size: 30rpx;
      color: #999999;
    }

    .button {
      line-height: 58rpx;
      background: #88b4c4;
      border-radius: 39rpx;
      font-size: 30rpx;
      color: #ffffff;
      padding: 0 30rpx;
    }
  }

  .card-wrap {
    position: relative;
    padding: 40rpx 30rpx 0 20rpx;
    display: flex;

    .number {
      width: 30rpx;
      height: 30rpx;
      line-height: 30rpx;
      background: #88b4c4;
      box-shadow: 0rpx 3rpx 6rpx 1rpx rgba(136, 180, 196, 0.5);
      border-radius: 50%;
      font-size: 24rpx;
      color: #ffffff;
      text-align: center;
      margin-left: 20rpx;
    }

    .content {
      margin-left: 28rpx;
      flex: 1;
      box-shadow: 0rpx 4rpx 10rpx 1rpx rgba(204, 204, 204, 0.5);
      border-radius: 10rpx;

      .header-wrap {
        background: #f1f6f9;
        display: flex;
        align-items: center;
        justify-content: space-between;
        line-height: 40rpx;
        padding: 20rpx 30rpx;

        .title {
          font-size: 30rpx;
          font-weight: 800;
          color: #333333;
        }

        .time {
          font-size: 26rpx;
          color: #999999;
        }
      }
    }
  }
}

.cu-card-wrap {
  margin: 0;
}

.text-area {
  height: 140rpx;
}

.uni-forms-item {
  margin-bottom: 20rpx;
}

.popup-wrap {
  width: 650rpx;
  background: #fff;
  border-radius: 20rpx;
  padding: 20rpx 30rpx;

  .button-wrap {
    display: flex;
    justify-content: center;
    padding: 20rpx 0;

    .button {
      width: 246rpx;
      line-height: 88rpx;
      border-radius: 44rpx;
      text-align: center;
    }

    .button-confirm {
      background: #454a5e;
      color: #ffffff;
      margin-right: 29rpx;
    }

    .button-cancle {
      background: #e3e4eb;
      color: #454a5e;
      margin-left: 29rpx;
    }
  }
}

.hidden-title {
  background: #f5f5f5;
  padding: 20rpx 30rpx;
  color: #999;
}

.button-confirm {
  margin: 40rpx auto 0;
  width: 600rpx;
  line-height: 98rpx;
  background: #454a5e;
  border-radius: 50rpx;
  font-size: 36rpx;
  color: #ffffff;
  text-align: center;
}
</style>
